import React from 'react'
import { UnorderedListOutline } from 'antd-mobile-icons'
import { Button, SearchBar, Swiper} from 'antd-mobile'
import { useNavigate } from 'react-router-dom'

function Home() {
    const navigate=useNavigate();
    const Login=()=>{
        navigate('/login')
    }
  return (
    <div>
      <div className='tou' style={{display:"flex",padding:"10px"}}>
        <UnorderedListOutline style={{fontSize:"30px",marginRight:"20px"}}/>
        <SearchBar placeholder='小白熊恒温调奶器'></SearchBar>
        <Button onClick={Login} color='primary' fill='none'>登录</Button>
      </div>
      <div>
        <Swiper loop autoplay>
            <Swiper.Item>
                <img src="../public/i1_02.jpg" alt="" style={{width:"100%", height:"200px"}}/>
            </Swiper.Item>
            <Swiper.Item>
                <img src="../public/i2_01.jpg" alt="" style={{width:"100%", height:"200px"}}/>
            </Swiper.Item>
            <Swiper.Item>
                <img src="../public/i3_02.jpg" alt="" style={{width:"100%", height:"200px"}}/>
            </Swiper.Item>
            <Swiper.Item>
                <img src="../public/i4_01.jpg" alt="" style={{width:"100%", height:"200px"}}/>
            </Swiper.Item>
        </Swiper>
      </div>
    </div>
  )
}

export default Home
